<script setup>
import { onUnmounted, ref, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import { archives, realTimeLocation, getInsideRobot } from '@/api/inspection/robot-list'
import { inspectionTask } from '@/api/inspection/task-manage'
import { inspectionMap } from '@/api/inspection/resource-manage'
import StartPointPositionDialog from './inspection/components/StartPointPositionDialog.vue'
import HomeMapKonva from './inspection/components/HomeMapKonva.vue'
import MainContainer from '@/components/MainContainer.vue'
import InspectionLeftList from './inspection/components/InspectionLeftList.vue'
import InspectionRightList from './inspection/components/InspectionRightList.vue'
import { robotTypes } from './utils/index'

const robot = reactive({
  type: robotTypes.OUTSIDE,
  list: [],
  active: null
})

watch(
  () => robot.type,
  (val) => {
    getRobotList(val)
  }
)

async function getRobotList(type) {
  const {
    data: { list = [] }
  } = await archives.getRobotAndCompany({ RType: type })
  robot.list = list
  if (robot.list.length > 0) {
    const { id, code } = robot.list[0]
    selectRobot(id, code)
  }
}

function selectRobot(id, code) {
  robot.active = id
  getInspectionTaskList({
    activeStatus: 1,
    rid: code,
    type: 1,
    limit: 100
  })
}

getRobotList(robotTypes.OUTSIDE)

// 巡检任务列表
let taskTimer
const inspectionTaskList = ref([])
async function getInspectionTaskList(params) {
  clearTimeout(taskTimer)
  const {
    data: { list = [] }
  } = await inspectionTask.read(params)
  inspectionTaskList.value = list.reverse()
  taskTimer = setTimeout(() => {
    getInspectionTaskList(params)
  }, 2000)
}

// 当前巡检任务
const activeInspectionTask = ref(null)
async function selectActiveInspectionTas(id, mid, rid) {
  clearTimeout(timer)
  activeInspectionTask.value = id
  const { data } = await inspectionMap.read({ id: mid })
  const { url } = data.list[0]
  await konva.value.initImage(url)
  realTimeUpdatePath(id, rid)
}

// 实时更新路线
let timer
async function realTimeUpdatePath(id, rid) {
  clearTimeout(timer)
  const {
    data: { taskRaw, locations = [] }
  } = await realTimeLocation(id, rid)
  konva.value.previewPath(JSON.parse(taskRaw))
  konva.value.realTimePath(locations || [])
  timer = setTimeout(() => {
    realTimeUpdatePath(id, rid)
  }, 2000)
}

const konva = ref(null)

// 起点坐标
const startPointPositionDialogVisible = ref(false)
const startPointPositionCode = ref('')
function openStartPointPositionDialog(code) {
  startPointPositionCode.value = code
  startPointPositionDialogVisible.value = true
}

// 进入操控端
const router = useRouter()
function enterControl(id, type = 'outsideInspection') {
  router.push({ name: 'inspection-control', query: { id, rType: type } })
}

const insideRobotList = ref([])
async function fetchInsideRobot() {
  const { data } = await getInsideRobot()
  insideRobotList.value = data.list || []
}
fetchInsideRobot()

onUnmounted(() => {
  clearTimeout(timer)
  clearTimeout(taskTimer)
})
</script>

<template>
  <MainContainer>
    <el-container class="h-full">
      <el-aside>
        <InspectionLeftList
          v-model:active-name="robot.type"
          :list="robot.list"
          :active-robot="robot.active"
          @open="openStartPointPositionDialog"
          @enter="enterControl"
          @select="selectRobot"
        ></InspectionLeftList>
      </el-aside>
      <el-main class="p-0">
        <HomeMapKonva ref="konva"></HomeMapKonva>
      </el-main>
      <el-aside class="w-96">
        <InspectionRightList
          :task-list="inspectionTaskList"
          @select="selectActiveInspectionTas"
        ></InspectionRightList>
      </el-aside>
    </el-container>
    <StartPointPositionDialog
      v-model:visible="startPointPositionDialogVisible"
      :code="startPointPositionCode"
    />
  </MainContainer>
</template>
